<template>
  <div id="member-product-collect-list-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-35-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+35)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>积分兑换商品</span>
    </div>

    <i-scroller-box id="product-list" ref="i-scroller-box"
                    url="ShopProduct/getScoreStockList"
                    :height="getWinSize().height-40-this.getSafeArea().top-10"
                    :style="{
       width:'100%',
                    }">
      <template v-slot:list-item="{index,data}">
        <product-list-item :confirm-order-call-back="function(){
          confirmOrder(data)
        }" :show-type="5" :key="index" :curr-product="{
            id:data.id,
            shopId:data.shopId,
            shopName:data.shopName,
            shopLogo:data.shopLogo,
            shopProductId:data.shopProductId,
            name:data.shopProductName,
            image:data.image?data.image:data.shopProductImage,
            model:data.model,
            price:data.price,
            score:data.score,
          }" :change-call-back="getList"/>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import ShopListItem from '../common/ShopListItem'
import ProductListItem from '../common/ProductListItem'
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MemberScoreMall',
  components: {IScrollerBox, ProductListItem, ShopListItem},
  data: function () {
    return {
      userInfo: {
        id: 0,
        score: -1,
      },
      productList: demoData.productList
    }
  },
  mounted () {
    let $this=this
    setTimeout(function () {
      $this.getInfo()
    },800)
  },
  methods: {
    confirmOrder: function (currProduct) {
      if (currProduct.score - 0 > this.userInfo.score - 0) {
        return this.$message.error('您当前的积分余额不足: ' + currProduct.score)
      }
      var selectData = {
        shop: {
          id: currProduct.shopId,
          name: currProduct.shopName,
          logo: currProduct.shopLogo
        },
        productList: [
          {
            id: currProduct.id,
            nums: 1,
            model: currProduct.model,
            score: currProduct.score,
            price: currProduct.price,
            name: currProduct.name,
            image: currProduct.image,
            shopProductId: currProduct.shopProductId,
            shopProductName: currProduct.shopProductName,
            shopProductImage: currProduct.shopProductImage
          }
        ]
      }
      localStorage.setItem('selectProductData', JSON.stringify(selectData))
      let $this = this
      $this.checkLoginAct(function () {
        $this.$router.push({
          name: 'ConfirmOrder',
          query: {
            type: 'one',
            extendType: 'score',
            score: currProduct.score,
          },
        })
      })
    },
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (userInfo) {
        $this.userInfo = userInfo
        $this.getList()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getList: function () {
      var form = {}
      form.isScore = 1
      form.sortProp = 'id'
      form.sortOrder = 'DESC'
      this.$refs['i-scroller-box'].getList({form})
    }
  }
}
</script>

<style scoped>

</style>
